<template>
  <div class="news-box">
    <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button>
          <el-button type="primary" @click="getLists" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>
      <el-form :model="search" ref="searchForm" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="用户id:" prop="userid">
          <el-input v-model="search.userid" size="large" placeholder="请输入内容" @change="getLists" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名称:" prop="username">
          <el-input v-model="search.username" size="large" placeholder="请输入内容" @change="getLists" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="电话:" prop="phone">
          <el-input v-model="search.phone" size="large" placeholder="请输入内容" @change="getLists" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="业务员id:" prop="yewuyuanid">
          <el-input v-model="search.yewuyuanid" size="large" placeholder="请输入内容" @change="getLists" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="创建时间:" prop="time">
          <el-date-picker v-model="search.dateRang" type="daterange" range-separator="到" start-placeholder="开始时间"
            end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" @change="getLists" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
      <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center">
      </el-table-column>

      <el-table-column prop="avatar" label="头像" align="center" header-align="center">
        <template #default="scope">
          <img style="width: 100px; height: 100px" v-if="scope.row.avatar" :src="scope.row.avatar" alt="" />
        </template>
      </el-table-column>

      <el-table-column prop="username" label="会员名称" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="userid" label="会员id" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="money" label="余额" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="yewuyuanid" label="业务员id" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="createtime" label="创建时间" align="center" header-align="center"> </el-table-column>

      <el-table-column label="操作" align="center" header-align="center" width="160px">
        <template #default="scope">
          <!-- <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon">
            <Edit />
          </el-icon>

          <el-icon @click.stop="deleteFun(scope.row.id)" class="lists-delete-icon">
            <Delete />
          </el-icon> -->
          <el-button type="primary" @click.stop="getMoney(scope.row)" size="small" class="el-button"
            style="margin-bottom: 5px">
            <span>钱包明细</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 20px; overflow: hidden">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        @prev-click="handlePrev" @next-click="handleNext" :current-page="pageNum" :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from "@/pinia/user"
import { getAllUserList } from '@api/huiyuan'

const userStore = useUserStore()

const router = useRouter()

//获取列表
const search = ref({
  userid: "",
  username: "",
  phone: "",
  yewuyuanid: "",
  dateRang: []
})

const resetFun = () => {
  search.value = {
    userid: "",
    username: "",
    phone: "",
    yewuyuanid: "",
    dateRang: []
  }
  getLists()
}
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(10)

const lists = ref([])
async function getLists() {
  let {
    userid,
    username,
    phone,
    yewuyuanid,
    dateRang } = search.value

  let searchOpt = {
    pageNo: pageNo.value,
    pageSize: pageSize.value
  }

  if (userid) {
    searchOpt.userid = userid
  }

  if (username) {
    searchOpt.username = username
  }

  if (phone) {
    searchOpt.phone = phone
  }

  if (yewuyuanid) {
    searchOpt.yewuyuanid = yewuyuanid
  }

  if (dateRang && dateRang.length) {
    searchOpt.starttime = dateRang[0]
    searchOpt.endtime = dateRang[1]
  }
  let res = await getAllUserList(searchOpt)
  lists.value = res.data

  if (res.code == 200) {
    lists.value = res.data.map(v => {
      return {
        ...v,
      }
    })
    total.value = parseInt(res.msg)
  }

}

//pageSize改变
function handleSizeChange(val) {
  pageSize.value = val
  getLists()
}

//pageNo改变
function handleCurrentChange(val) {
  pageNo.value = val
  getLists()
  // this.$store.dispatch('setpageNo', val);
}

//上一页
function handlePrev(val) {
  pageNo.value = val
  getLists()
}

//下一页
function handleNext(val) {
  pageNo.value = val
  getLists()
}

//查看详情
function rowCli(item, column) {

}

// 获取钱包明细
const getMoney = (row) => {
  router.push({ path: '/home/qianbao', query: { userid: row.userid, username: row.username } })
}

onMounted(() => {
  getLists()
})
</script>
<style lang="scss" scoped>
.news-box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;

  .left-right-box {
    position: absolute;
    top: 172px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-box {
      height: 100%;
      width: 230px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 50px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      position: relative;
      overflow-y: auto;
      border-radius: 4px;
      margin-right: 20px;

      .title {
        font-size: 14px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;

        .icon {
          float: right;
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .left-lists {
        font-size: 12px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: relative;

        .name {
          float: left;
        }

        .input-name {
          width: 90px;
          float: left;
          padding: 0;

          .el-input__inner {
            padding: 0 10px;
          }
        }

        .option {
          float: right;
        }
      }
    }

    .left-lists.active {
      color: #4c9ff2 !important;
      background-color: #f5f5f5;
    }

    .right-box {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
